接續上一篇...

首先上個圖，這張圖很重要～

圖片來源：Google 搜尋

以下針對每個部分做個說明：

• Memory Heap：
  JavaScript Runtime 的 Memory Heap 主要是進行記憶體的分配。

• Call stack：
  JavaScript 中等待執行的任務會放入這裡。
  它是一個LIFO ( Last In, First Out 後進先出 ) 佇列

  • Blocking：
    假如 非同步事件 和 同步事件 都一起放進 Call stack，那麼就會造成阻塞。
    比如我們發出一個HTTP的請求，那麼在完成回傳 response 之前，就會因為 JavaScript 單執行緒的特性，讓我們在網頁上都無法進行其它動作。
    (因一次只做一件事，回傳未完成，不會執行下一件事)

• Web API's：
  setTimeOut、DOM Event、Ajax、Http Requests...等，在 Stack 內有需要執行 Web API 的部分會被移到這裡做 等待 / 執行，執行完畢會被移到 Callback Queue 內

• Callback Queue (Task Queue)：
  這裡的資料結構並不是 Queue 而是 Sets。
  這裡主要放置在 Web API 執行完畢的部分，在這裡隊列，等待再被移置 Stack 內執行

• Job Queue：
  這裡的資料結構是 Queue。
  這裡放置的 Task 有較高的優先權。
  Event Loop 會優先檢查及執行 Job Queue 裡的 Task，全部執行完後才會到 Callback Queue 看有沒有其他隊列的事件要執行。

• Event Loop：
  指的是瀏覽器的 JavaScript引擎 處理程式碼 ( Queue ) 的方式。

另外，如果想將 Javascript Call Stack 印出來看看
可以使用

console.log(now Error().stack);

備註：

執行緒（英語：thread）是作業系統能夠進行運算排程的最小單位。
Single thread 單執行緒 => 一次只能做一件事

Reference Data

• 所以說event loop到底是什麼玩意兒？| Philip Roberts | JSConf EU (有繁中字幕)
• Asynchronous and Single-threaded JavaScript? Meet the Event Loop
  這篇英文文章說明的很詳細，推薦一看 推
• 一次了解 JS 中的 Event loop、Call Stack 與 Task Queue

呼～終於整理完了
相對也比較瞭解同步、非同步實際上也不只是 JavaScript 單執行緒的情境，還需要加上 瀏覽器內部的行為...等等，一系列的交互過程～

今天就到這邊，謝謝大家觀看
有任何問題或是有誤寫的地方，也請各位捧油不吝指正唷～